<template>
  <!-- 大盒子 -->
  <div class="jobInfo-container">
    <!-- 内容盒子 -->
    <div class="jobInfo-box">
      <!-- 标题盒子 -->
      <div class="title-box">
        <h2>最新职位</h2>
      </div>
      <!-- 职位展示盒子 -->
      <div>
        <!-- 标签栏 -->
        <div>
          <el-tabs v-model="tabName">
            <el-tab-pane label="最新职位" name="first"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 单个招聘信息盒子 -->
        <div class="Jobs">
          <!-- <el-card class="box-card" v-for="item in joblists" :key="item.id"> </el-card> -->
          <el-card class="box-card">
            <div class="card-title">
              <!-- 兼职标题 -->
              <div class="job-title">
                <p>java后端开发工程师</p>
              </div>

              <!-- 兼职工资 -->
              <div class="job-salary">
                <p>400元/天</p>
              </div>
            </div>
            <!-- 兼职时间信息 -->
            <div class="date">
              <el-tag type="info">3个月</el-tag>
              <el-tag type="info">距离</el-tag>
            </div>
            <!-- 公司名称 -->
            <div class="companyInfo">
              <el-avatar :size="30" :src="companyAvatarUrl"></el-avatar>
              <div class="companyName">
                <el-link href="">北京字节跳动</el-link>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JobInfo',
  data() {
    return {
      //最新职位 标签选中状态
      tabName: 'first',
      //公司头像
      companyAvatarUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',

      joblists: [
        {
          tilts: '',
          recruitor: ''
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
p {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}
.jobInfo-container {
  background-color: #f2f4f7;
  .jobInfo-box {
    margin: 0 auto;
    width: 1086px;
    // background-color: black;

    .title-box {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      padding: 25px 0 20px 0;
    }
    .Jobs {
      display: flex;
      flex-wrap: wrap;
      .box-card {
        border-radius: 15px;
        width: 340px;
        padding: 0;
        margin-right: 12px;
        margin-bottom: 12px;
        /deep/.el-card__body {
          padding: 0;
          //标题样式
          .card-title {
            display: flex;
            padding: 10px 20px;
            justify-content: space-between;
            .job-title {
              width: 120px;
            }
            .job-salary {
              color: red;
            }
          }
          //日期|距离样式
          .date {
            // margin: 6px;
            padding: 0 20px;
            .el-tag {
              padding: 0;
              height: 12px;
              padding: 2px 4px;
              line-height: 7px;
              margin-right: 6px;
            }
          }
          //公司名称 地点
          .companyInfo {
            background-color: #fafafa;
            // margin: 0 0 5px 0;
            display: flex;
            padding: 10px 20px;
            .companyName {
              margin-left: 10px;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
